<script setup lang="ts">
import { useUserStore } from '@/stores/user';
import { computed } from 'vue';

// 通过 props 传参
const props = withDefaults(defineProps<{
  btnPerm?: string
}>(),{
  btnPerm: ''
})

// 超级管理员
const adminPerms = '*:*:*'

// 判断是否渲染高阶组件
const isShow = computed(()=>{
  // 获取权限列表
  const store = useUserStore()
  const perms = store.profile.permissions
  // 超级管理员，直接返回 true 渲染插槽
  if(props.btnPerm === adminPerms){
    return true
  }
  // 判断是否包含
  return perms.includes(props.btnPerm)
})
</script>

<template>
  <!-- 高阶组件的核心是 -> 插槽 -->
  <slot v-if="isShow"></slot>
</template>